import React, {memo, useEffect,useState} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux'
import { Table, Tag, Space, Divider, Button, Modal, Spin, message, Select, Form, Input} from 'antd';
import { updateLeaseWithdrawalInfo } from '../../services';
import { returnPaymentCalculate } from '../../utils';


//退租办理页面
//宿舍号，退租办理人，联系方式，退租原因，提交管理员审批
const { Option } = Select;

export default memo(function LeaseWithdrawal() {
     //表单布局
     const layout = {
        labelCol: {
          span: 8,
        },
        wrapperCol: {
          span: 16,
        },
      };
      const tailLayout = {
        wrapperCol: {
          offset: 8,
          span: 16,
        },
      };

    const [form] = Form.useForm();
    const onFinish = (values) => {
        // console.log(values);
        if(returnPaymentCalculate(values.rental_payment, values.rental_duration) == Number(values.return_payment))
        {
            updateLeaseWithdrawalInfo(values).then(res => {
                console.log(res);
                if(res.status === 200)
                {
                    message.success('退租申请提交成功！请等待审批!');
                    form.setFieldsValue({
                        room_number:"",
                        air_number:"",
                        rental_duration:"",
                        house_cheif:"",
                        house_cheif_number:"",
                        rental_beginning_date:"",
                        lease_withdrawal_reason: "",
                        rental_payment: "",
                        return_payment_account:"",
                        return_payment:""
                    })
                }else{
                    message.error('退租申请提交失败！请重新提交');
                }
            }).catch(err => {
                console.log('err', err);
                message.error('退租申请提交失败！请重新提交');
            })
        }else{
            message.error("退租金额不正确,请重新填写!")
        }

        
      };
    return (
        <div>
            <Divider orientation="left">退租办理</Divider>
            <Form
                {...layout}
                form={form}
                name="control-hooks"
                onFinish={onFinish}
                style={{
                    maxWidth: 600,
                }}
                >
                <Form.Item
                    name="room_number"
                    label="宿舍号"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="air_number"
                    label="空调编号"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="rental_beginning_date"
                    label="租赁起始时间"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"

                    },
                    ]}
                >
                    <Input placeholder='示例:2021-11-01'/>
                </Form.Item>
                <Form.Item
                    name="house_cheif"
                    label="退租申请人"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="house_cheif_number"
                    label="申请人联系方式"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="lease_withdrawal_reason"
                    label="退租原因"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input.TextArea rows={3} placeholder='你可以填毕业退租\换宿舍换校区退租\其他'/>
                </Form.Item>
                <Form.Item
                    name="rental_payment"
                    label="已缴纳租金"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="rental_duration"
                    label="已租赁时间"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input placeholder='按学期计算,一年两个学期'/>
                </Form.Item>
                <Form.Item
                    name="return_payment"
                    label="应退还租金"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="return_payment_account"
                    label="租金返还账户"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input placeholder='请填写有效正确的支付宝账户'/>
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                    提交审批
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
})